// AJAX作用：
// * 异步的 JS 和 XML
// * 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据(网页内容发生更改不刷新网页)

const btn = document.querySelectorAll('button');
const box = document.getElementById('box1');

// 配置默认url
axios.defaults.baseURL = 'http://127.0.0.1:9000'
// 配置默认请求头
axios.defaults.headers = {'Content-Type': 'application/x-www-form-urlencoded'}

// 添加请求拦截器
axios.interceptors.request.use((config)=>{
    // 防止发送 重复请求
    if (cancel!==null){
        cancel()
        // return
    }
    //添加一个取消请求的配置
    config.cancelToken=new axios.CancelToken(c=>{
        //给取消请求的变量赋值
        cancel=c
    })
    return config
})

// 定义一个用来 取消请求 的全局变量
let cancel=null

// 发送GET请求
btn[0].addEventListener('click', function () {
    axios({
        method: 'GET',//请求方法
        url: '/found' , //URL
        params: { //url参数
            name: '西游记'
        },
    }).then(values => {
        let data=''
        console.log(values)
        console.log(values.data[0])
        //Object.entries()是JavaScript中用于将对象转换为包含其键值对的数组的方法
        //for (const [key, value] of Object.entries(my_object)) {: 这里使用了数组的解构赋值（destructuring assignment）语法，将每个键值对解构为key和value两个变量。在每次循环迭代时，key将获得键的值，value将获得相应的值。
        // console.log(${key}: ${value});: 这行代码使用了模板字面量（template literals）语法，将key和value的值格式化为一个字符串，并通过console.log()函数将其输出到控制台。结果将是类似于以下内容的输出：
        for (const [key, value] of Object.entries(values.data[0])) {
            data+=`${key}: ${value}`+'<br>'
        }
        box.innerHTML = data
        // 当请求完成后 将cancel初始化
        cancel=null
    }).catch(reason => {
        if (axios.isCancel(reason)){
            console.log('信息查询的请求已取消！')
        }else {
            cancel=null
            console.log('信息查询请求失败了~'+reason)
        }
    })
})

// 发送Post请求
btn[1].addEventListener('click', function () {
    axios({
        //请求方法
        method: 'POST',
        //url
        url: '/create',
        //url参数
        params: {
            name: '西游记'
        },
        //请求体参数
        data: {
            name: "三国演义",
            author: "张三",
            author_sex:"男",//这里的值必须是枚举数组中的值
            price: "30",
            is_hot:true,//是否是热销书籍
            tags:["鬼怪","打斗","励志"],//书籍标签
            save_time:new Date(),//时间
            test:"test"
        }
    }).then(values => {
        console.log(values.data)
        console.log('成功！')
        box.style.backgroundColor='pink'
        box.style.color='black'
        let data=''
        for (const [key, value] of Object.entries(values.data)) {
            data+=`${key}: ${value}`+'<br>'
        }
        box.innerHTML = data
        // 当请求完成后 将cancel初始化
        cancel=null
    }).catch(reason => {
        if (axios.isCancel(reason)){
            console.log('信息添加的请求已取消！')
        }else {
            cancel=null
            console.log('信息添加请求失败了~'+reason)
        }
    })
})

// 发送Put请求
btn[2].addEventListener('click', function () {
    axios({
        //请求方法
        method: 'PUT',
        //url
        url: '/change',
        //url参数
        params: {
            username: 'admin',
            password: 'admin'
        },
        // //请求头
        // headers: {
        //     'Content-Type': 'application/x-www-form-urlencoded'
        // },
        //设置请求体
        data:{
            test:'success'
        }
    }).then(values => {
        let data=''
        console.log(values.data[0])
        //Object.entries()是JavaScript中用于将对象转换为包含其键值对的数组的方法
        //for (const [key, value] of Object.entries(my_object)) {: 这里使用了数组的解构赋值（destructuring assignment）语法，将每个键值对解构为key和value两个变量。在每次循环迭代时，key将获得键的值，value将获得相应的值。
        // console.log(${key}: ${value});: 这行代码使用了模板字面量（template literals）语法，将key和value的值格式化为一个字符串，并通过console.log()函数将其输出到控制台。结果将是类似于以下内容的输出：
        for (const [key, value] of Object.entries(values.data[0])) {
            data+=`${key}: ${value}`+'<br>'
        }
        box.innerHTML = data

    }).catch(reason => {
        console.log('err'+reason)
    })
})

// 发送Delete请求
btn[3].addEventListener('click', function () {
    axios({
        //请求方法
        method: 'DELETE',
        //url
        url: '/delete',
        //url参数
        params: {
            username: 'admin',
            password: 'admin'
        },
        // //请求头
        // headers: {
        //     'Content-Type': 'application/x-www-form-urlencoded'
        // },
        //请求体参数
        data: {
            name: '三国演义'
        }
    }).then(values => {
        console.log(values.data)
        let data=''
        for (const [key, value] of Object.entries(values.data)) {
            data+=`${key}: ${value}`+'<br>'
        }
        box.innerHTML = data

    }).catch(reason => {
        console.log('err'+reason)
    })
})

// 取消请求
btn[4].addEventListener('click', function () {
    if (typeof cancel!=='function'){
        console.log('没有可取消的请求！')
        return
    }
    cancel()
    console.log('请求已取消！！')
})

